﻿
// Using JQUERY

jQuery.fn.threeStateCheckBox = function () {

    // El control tiene la siguiente estructura
    // <span id='' ImagePath='/'>
    // <img />
    // <input type='hidden' name='hidthree_ + id' />
    // </span>

    function changeState(el) {

        // obtengo el estado actual del hidden
        var hiddenCtrl = $(el).find('input');
        var imgCtrl = $(el).find('img');
        var imgPath = $(el).attr('ImagePath');

        var currentState = parseInt(hiddenCtrl.val());
        currentState = ((currentState + 1) % 3) + 1;
        hiddenCtrl.val(currentState);
        imgCtrl.attr('src', '' + imgPath + currentState + '.bmp');
    };   

    // set the current element
    var el = $(this);

    el.click(function () {
        changeState(this);
    });

    return;
};